<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<canvas id="canvas" style="border: 2px solid #ccc; display: block;margin: 50px auto;">
			
		</canvas>
	</body>
	<script>


			var canvas = document.getElementById("canvas");
			canvas.width =800;
	        canvas.height =800;
			 var context = canvas.getContext("2d");//2d环境
			 
	        //背景为黑色
	       // context.fillStyle="black";
	        //设置渐变色线线性渐变
	      context.save();
	        var skyStyle1 = context.createLinearGradient(0,0,0,canvas.height*0.7);
	        skyStyle1.addColorStop(0,"black");
	        skyStyle1.addColorStop(1,"#035");
	        context.fillStyle=skyStyle1;
	        context.fillRect(0,0,canvas.width,canvas.height);
	        context.restore();

for(var i=0; i<50; i++){
		var R=Math.random()*5+5;
		var x = Math.random()*canvas.width;
	 	//var y = Math.random()*canvas.height;
	 	//只有半边有星星
	 	var y = Math.random()*canvas.height*0.38;
		var a =Math.random()*360;
		drawStar(context, x, y, R,a);
	}
		
function drawStar(cxt,x,y,r,rot){
	//保存点
	cxt.save();
	
	cxt.translate(x,y);//偏移
	cxt.rotate(rot/180*Math.PI);//旋转
	cxt.scale(r+1,r+1);//缩放||但是也会放大线条宽度和其实点（偏移了）
	starPath(cxt);//绘制图形
	cxt.fillStyle='yellow';//填充色
	// cxt.strokeStyle='blue';//线条色
	// cxt.lineWidth=3;//线条宽
	 //cxt.lineJoin='round';//线条交界处样式
	 //操作
	 cxt.fill();//填充
	// cxt.stroke();//描边
	
	cxt.restore();//清空样式
}
//画星星
	function starPath(cxt){
		cxt.beginPath();
		for(var i=0; i<5; i++){
			cxt.lineTo(Math.cos((18+i*72)/180*Math.PI),
										 -Math.sin((18+i*72)/180*Math.PI));
		 	cxt.lineTo(Math.cos((54+i*72)/180*Math.PI)*0.5,
										 -Math.sin((54+i*72)/180*Math.PI)*0.5);
		}
		cxt.closePath();
	}	
//////////////////////////////////////////////////////////////////////////////////////
		//调用函数画出月亮
			fillMoon(context,550,150,70,30);

	
	//计算公式
		function dis(x1,y1,x2,y2){
			return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
		}
			
		
		//封装函数     绘制填充色的月亮
		function fillMoon(cxt,x,y,r,rot,/*optional可选的*/ fillColor){//环境，x y月亮的位置，r半径||大小，rot旋转角度，颜色
			cxt.save();
			cxt.translate(x,y);
			cxt.rotate(rot*Math.PI/180);
			cxt.scale(r,r);
			pathMoon(cxt);
			cxt.fillStyle=fillColor||"#fb5";
			cxt.fill();
			cxt.restore();

		}
	function pathMoon(cxt){//绘制月亮的轮廓
		cxt.beginPath();
		cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);//0,0为圆心1为半径,0.5π到1.5π逆时针绘制
		cxt.moveTo(0,-1);//移动当前点到0 -1
	//	cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
	    cxt.quadraticCurveTo(1.2,0,0,1);//控制点1.2 0  终止点 0  1    （只能通过这控制满度||第一个参数越大越弯）
		cxt.closePath();
		
	}
////////////////////////////////////////////////
    //绿地
	      drawLand(context);
	      function drawLand(cxt){
	      	cxt.save();
	      	//设置形状
	      	cxt.beginPath();
	      	cxt.moveTo(0,600);
	      	cxt.bezierCurveTo(540,400,660,800,1200,600);//贝塞尔三次曲线
	      	cxt.lineTo(1200,800);
	      	cxt.lineTo(0,800);
	      	cxt.closePath();
	      	
	      	//设置渐变色
	      	var landStyle =cxt.createLinearGradient(0,800,0,0);//线性渐变
	      	landStyle.addColorStop(0.0,"#030");
	      	landStyle.addColorStop(1.0,"#580");
	      	cxt.fillStyle=landStyle;
	      	cxt.fill();
	      	cxt.restore();
	      	
	      }
	</script>
</html>
